<!--
- File:    植物列表页（选择添加植物）.
-->
<template>
  <div>
    <div class="Web_Box" style="padding-top:50px; margin-bottom: 0">
      <header class="heard">
        <div class=" xd top_bg">
          <div class="list_search">
            <form action="" @submit="search">
              <input type="search" autocomplete="off" placeholder="请输入搜索关键字" v-model="keyword"><i class="iconfont icon-search" @click="search"></i>
            </form>
          </div>
          <div class="cancel" @click="cancleSearch">取消</div>
        </div>
      </header>
      <div class="Letterselection">
        <ul class="f-cb">
          <li :class="{'cur': rang == 'A-C'}" @click="switchRang('A-C')">A-C</li>
          <li :class="{'cur': rang == 'D-F'}" @click="switchRang('D-F')">D-F</li>
          <li :class="{'cur': rang == 'G-I'}" @click="switchRang('G-I')">G-I</li>
          <li :class="{'cur': rang == 'J-L'}" @click="switchRang('J-L')">J-L</li>
          <li :class="{'cur': rang == 'M-O'}" @click="switchRang('M-O')">M-O</li>
          <li :class="{'cur': rang == 'P-R'}" @click="switchRang('P-R')">P-R</li>
          <li :class="{'cur': rang == 'S-U'}" @click="switchRang('S-U')">S-U</li>
          <li :class="{'cur': rang == 'V-Z'}" @click="switchRang('V-Z')">V-Z</li>
        </ul>
      </div>
      <!--搜索为空-->
      <div class="search_null" style="width: auto" v-show="plantList.allLoaded && plantList.data.length <= 0"><i class="iconfont icon-meiyouxiaoxi"></i>
        <p>没有搜索到相关植物</p>
        <!--<a class="add_null" style="display: inline-block; margin-right: 10px;" v-show="action == 'select'" @click="gotoDistinguish">拍照识花</a>-->
        <a class="add_null" style="display: inline-block" v-show="action == 'select'" @click="gotoDistinguish">手动添加</a>
      </div>
      <!--搜索为空-->
      <div class="bg_fff mt20 pl20" v-infinite-scroll="loadMore"
        infinite-scroll-disabled="false"
        infinite-scroll-distance="0"
        infinite-scroll-immediate-check="false">
        <div class="graden_cont4" style="text-align: center" v-show="plantList.data.length > 0">
          <!--<a class="add-plant-handle" v-show="action == 'select'" @click="gotoDistinguish">拍照识花</a>-->
          <a class="add-plant-handle" v-show="action == 'select'" @click="gotoDistinguish">手动添加</a>
          <ul class="f-cb">
            <li v-for="plant in plantList.data" @click="clickPlant(plant)">
              <div class="graden_bg4">
                <img :src="$config.imgsite + $config.uploadImgSrc + plant.m_goods_image + '_w200'" @error="imgLoadFailHandle">
                <i class="iconfont icon-xuanze" v-show="action == 'select' && plant.selected"></i></div>
              <h3>{{plant.m_name}}</h3>
            </li>
          </ul>
        </div>
      </div>
      <loading-more :allLoaded="plantList.allLoaded" :show="plantList.data.length > 0"></loading-more>
    </div>
    <div class="buttonfinish" v-show="action == 'select'" @click="gotoSelectPlantAttr"><a>下一步</a></div>
    <back-nav></back-nav>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        gardenId: this.$route.query.garden,
        parentId: this.$route.query.parentId,
        gardenType: this.$route.query.gardenType,
        action: this.$route.query.action || 'view', // 'select' 选择， 'view' 浏览
        plantDefautImg: require('../../assets/images/demo/xinqing2.png'),
        rang: '',
        keyword: '',
        selectedPlant: {m_id: '', m_name: ''},
        plantList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    created() {
      // this.$native.weixinShare(window.location.href)
      this.getPlantList(this.plantList.page, this.plantList.pageSize)
    },
    methods: {
      gotoDistinguish() {
        this.$router.push({name: 'distinguish', query: {temp: this.$utils.getRandomStr(), type: 'hand'}})
      },
      gotoAddPlant() {
        this.$router.push({name: 'plant-add', query: {garden: this.gardenId, gardenType: this.gardenType, parentId: this.parentId}})
      },
      gotoSelectPlantAttr() {
        if (this.selectedPlant.m_id == '') {
          this.$toast('请选择要添加的植物')
          return
        }
        this.$router.push({name: 'plant-attr', query: {garden: this.gardenId, gardenType: this.gardenType, plant: this.selectedPlant.m_id, plantName: this.selectedPlant.m_name, parentId: this.parentId, image: this.selectedPlant.m_goods_image}})
      },
      search(e) {
        e.preventDefault()
        this.rang = ''
        this.plantList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getPlantList(this.plantList.page, this.plantList.pageSize)
      },
      cancleSearch() {
        this.keyword = ''
        this.plantList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getPlantList(this.plantList.page, this.plantList.pageSize)
      },
      back() {
        this.$router.go(-1)
      },
      clickPlant(plant) {
        if (this.action == 'view') {
          this.gotoWiki(plant.m_id)
        } else {
          if (plant.selected) {
            plant.selected = false
            this.selectedPlant = {m_id: '', m_name: ''}
          } else {
            this.$set(plant, 'selected', true)
            this.selectedPlant = plant
            this.clearOthersSelected(plant.m_id)
          }
        }
      },
      clearOthersSelected(id) {
        for (let i = 0; i < this.plantList.data.length; i++) {
          if (this.plantList.data[i].m_id == id) {
            continue
          }
          if (this.plantList.data[i].selected) {
            this.plantList.data[i].selected = false
          }
        }
      },
      gotoWiki(id) {
        this.$router.push({name: 'wiki', query: {id: id}})
      },
      switchRang(rang) {
        if (this.rang == rang) {
          this.rang = ''
        } else {
          this.rang = rang
        }
        this.plantList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getPlantList(this.plantList.page, this.plantList.pageSize)
      },
      imgLoadFailHandle(e) {
        e.target.src = this.plantDefautImg
      },
      getPlantList(page, pageSize) {
        this.plantList.loading = true
        this.$request.getPlantList(page, pageSize, this.keyword, this.rang).then(data => {
          if (data.length < this.plantList.pageSize) {
            this.plantList.allLoaded = true
          }
          this.plantList.data = [...this.plantList.data, ...data]
        }).finally(() => {
          this.plantList.requested = true
          this.plantList.loading = false
        })
      },
      loadMore() {
        if (this.plantList.loading || this.plantList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getPlantList(++this.plantList.page, this.plantList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>
  .add-plant-handle {
    width: 100px;
    display: inline-block;
    margin: 10px auto;
    margin-top: 0;
    margin-right: 10px;
    line-height: 26px;
    font-size: 12px;
    text-align: center;
    border-radius: 60px;
    color: #25b45b;
    border: 1px #25b45b solid;
  }
</style>